<!-- 主页内容组件 -->
<template>
  <!-- 侧边栏 -->
  <div class="sidebar">
    <div class="avatar" @click="navTo(0)">
      <img src="../assets/头像.png" style="margin-top: 10px" />
      <span style="margin-top: 10px">{{ username }}</span>
    </div>
    <div class="button">
      <img src="../assets/邮箱.png" style="cursor: pointer" @click="incomplete()" />
      <img src="../assets/设置.png" style="margin-top: 10px; cursor: pointer" @click="showSetting()" />
    </div>
  </div>
  <!-- 主页面 -->
  <div class="mainbar">
    <!-- 文字 -->
    <div style="pointer-events: none;">
      <span style="font-weight: bold; font-size: 2rem">{{ recentTime }}</span><br />
      <span style="font-size: 1rem">学习工作辛苦啦！欢迎使用智绘黑板。</span>
    </div>
    <!-- 按钮 -->
    <div class="mainbutton">
      <el-row>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple">
            <div class="singlebutton" @click="navTo(1)">
              <img src="../assets/加入会议.png" />
              <span style="margin: 10px; font-size: 1.5rem">加入课堂</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple-light">
            <div class="singlebutton" @click="navTo(2)">
              <img src="../assets/快速会议.png" />
              <span style="margin: 10px; font-size: 1.5rem">快速课堂</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple">
            <div class="singlebutton" @click="navTo(3)">
              <img src="../assets/预订会议.png" />
              <span style="margin: 10px; font-size: 1.5rem">预订课堂</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple-light">
            <div class="singlebutton" @click="navTo(4)">
              <img src="../assets/线下讲堂.png" />
              <span style="margin: 10px; font-size: 1.5rem">线下讲堂</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 会议提醒和历史会议 -->
    <div class="historymeeting">
      <booked />
    </div>
  </div>
  <!-- 设置页面 -->
  <setting :invisible="settingInvisible" />
</template>

<script setup>
import navByQRcode from './navByQRcode.vue'
import router from "@/router";
import store from "@/store";
import { onMounted, ref } from "vue";

var recentTime = ref();
var settingInvisible = ref(true); //设置面板是否不显示
const username = ref();

onMounted(() => {
  getTime();
  username.value = store.state.userData.username;
});

//打开设置页面
function showSetting() {
  settingInvisible.value = settingInvisible.value ? false : true;
}

//获取时间
function getTime() {
  recentTime.value = formattedDate(new Date());
  setInterval(() => {
    recentTime.value = formattedDate(new Date());
  }, 1000);
}

//格式化时间
function formattedDate(date) {
  // 确保传入的 date 是一个有效的 Date 对象  
  if (!(date instanceof Date)) {
    console.error('Invalid date');
    return '';
  }

  // 使用 padStart 方法来确保月份、日期、小时、分钟和秒都是两位数  
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth 返回的是 0-11，所以需要加 1  
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  // 使用模板字符串拼接日期和时间  
  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
}

//显示更新日志
function incomplete() {
  // alert(
  //   "5.13更新内容:\n" +
  //   "1.在课堂界面左上角新增了人数显示的功能，能显示当前本课堂中的人数\n" +
  //   "2.新增了课堂界面中麦克风按钮的交互效果\n" +
  //   "3.新增了点击邀请成员按钮时复制邀请信息的功能\n" +
  //   "5.14更新内容:\n" +
  //   "1.新增了聊天功能\n" +
  //   "2.修复了websocket多次显示连接错误的问题\n" +
  //   "3.修复了新用户进入课室时人数显示不正常工作的问题\n" +
  //   "4.新增了签到功能\n" +
  //   "5.15更新内容\n" +
  //   "1.新增了聊天中语音输入的效果(没有实际作用)\n" +
  //   "2.新增了课堂界面中左侧的视频效果(同样没有实际作用，做这个太折磨了反正一个礼拜肯定是搞不定)\n" +
  //   "5.17更新内容\n" +
  //   "1.新增了录制屏幕的显示效果\n" +
  //   "2.调整了黑板页面侧边栏的大小\n" +
  //   "3.新增了插入文件按钮\n" +
  //   "4.新增了扫码入课功能(可用性暂且未知)" +
  //   '5.18更新内容\n' +
  //   '1.socket终！于！修！好！了！感谢聪哥！！！\n' +
  //   '2.修复了确认签到后签到弹出框在页面左下角买房的问题\n' +
  //   '3.修复了同一个用户可以多次签到的问题\n' +
  //   '4.修复了刷新后仍留在课堂界面导致用户信息错误的问题\n' +
  //   '5.19更新内容\n' +
  //   '1.修复了websocket不弹错误信息的问题\n' +
  //   '2.更新了扫码结果页面，使其能够显示错误信息\n' +
  //   '5.20更新内容\n' +
  //   '1.修复了截图时背景为透明的问题\n'
  // )
  alert('邮件已发送')
}

//跳转页面
function navTo(num) {
  switch (num) {
    case 0:
      if (username.value != "登录") return;
      router.push("/login");
      break;
    case 1:
      if (loginState()) {
        return;
      }
      router.push("/joinMeeting");
      break;
    case 2:
      if (loginState()) {
        return;
      }
      router.push("/fastMeeting");
      break;
    case 3:
      if (loginState()) {
        return;
      }
      router.push("/bookMeeting");
      break;
    case 4:
      router.push("/offlineBoard");
      break;
  }
}

//判断是否登录
function loginState() {
  if (store.state.userData.userId == 123456789) {
    router.push("/login");
    return true;
  }
  return false;
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  width: 9.375rem;
  height: 100vh;
  background-color: rgb(245, 245, 245);
  display: inline-flex;
  flex-direction: column;
}

.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

.button {
  display: inline-flex;
  flex-direction: column;
  align-self: center;
  position: absolute;
  bottom: 1rem;
  left: 3.125rem;
}

.mainbar {
  position: absolute;
  left: 9.375rem;
  top: 2rem;
  display: inline-flex;
  flex-direction: column;
  margin-left: 2rem;
  width: 70rem;
}

.mainbutton {
  /* display: flex; */
  margin-top: 3rem;
  /* width: 50rem; */
}

.singlebutton {
  width: 13rem;
  height: 13rem;
  border-radius: 1.875rem;
  border: 3px solid rgb(2, 107, 255);
  box-shadow: 0px 4px 4px gray;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 15px;
}

.singlebutton img {
  width: auto;
  height: 5rem;
}

.historymeeting {
  margin-top: 2rem;
  width: 70rem;
  display: flex;
  flex-direction: row;
  height: 15rem;
}

.historymeeting table {
  width: 40rem;
}

.historymeeting td {
  font-size: 1.5rem;
}

.join {
  width: 6.25rem;
  height: 1.875rem;
  border-radius: 3px;
  background-color: rgb(232, 232, 232);
  border: 1px solid rgb(232, 34, 2);
  cursor: pointer;
}

.box1 {
  font-size: 25px;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.el-empty {
  --el-empty-padding: 0;
  --el-empty-image-width: 160px;
  --el-empty-description-margin-top: 0px;
  --el-empty-bottom-margin-top: 0px;
}
</style>